<template>
  <div>
    <div class="content">
        <div class="top">
            限时购
            <div class="time">
                12:59:08
                <span>后结束</span>
            </div>
            <div class="right">
                更多
                <van-icon name="arrow" />
            </div>
        </div>
        <div class="center">
            <div class="box" v-for="(v,index) in imgs" :key="index">
                <img :src="v" alt="">
                <p>{{text[index]}}</p>
                <span class="span">￥{{ money[index] }}</span>
                <del>￥{{ befor[index] }}</del>
                
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            imgs: [],
            befor: [],
            money: [],
            text:[]
        }
    },
    mounted() {
        this.$http({
            url:"http://localhost:3000/Timelimit"
        }).then(res => {
            this.imgs = res.data[0].data.timeimg
            this.befor=res.data[0].data.befor
            this.money = res.data[0].data.hotmoney
            this.text = res.data[0].data.timetext
        })
    }

}
</script>

<style lang="scss" scoped>
    .content{
        background-color: #fdeaea;
        width: 95vw;
        height: 50vw;
        margin: auto;
        margin-top: 4vw;
        border-radius: 3vw;
        padding-top: 2vw;
        .top{
            display: flex;
            text-indent: 4vw;
            color: black;

            .time{
                width: 60vw;
                color: red;
                span{
                    color:  #bbb1b6;
                }
            }
            .right{
                text-indent: 0;
                color: #bbb1b6;
            }
        }
        .center{
            width: 95vw;
            height: 43vw;
            display: flex;
            overflow: scroll;
            .box{
                width: 22vw;
                height: 39vw;
                margin-top: 2vw;
                background-color: #ffffff;
                margin-left: 1.5vw;
                border-radius: 1vw;
                img{
                    width: 20vw;
                    padding: 1vw;
                }
                p{
                    font-size: 2vw;
                    margin-top: -1.5vw;
                    color: #8d939c;
                    display: -webkit-box;
                     -webkit-box-orient: vertical;
                     -webkit-line-clamp: 1;
                     overflow: hidden;
                }
                del{
                    color: #8d939c;
                    display: block;
                    font-size: 2vw;
                }
                .span{
                    margin-top: -5vw;
                    color: red;
                }
            }
        }
    }
</style>